<!--
// 
// Index.vue
// 客户后台
// 
// 2024/09/19.
// 
-->
<template>
    <div class="Index">
        <vxe-table ref="VXETable" :column-config="{ resizable: false}" :height="tableHeight" :data="state.list" :loading="state.isLoading" :radio-config="{trigger: 'row', highlight: true}" :row-config="{isCurrent: true, isHover: true, keyField: 'id'}"  :tree-config="{childrenField: 'children', reserve: true}" border round show-overflow size="small" @current-change="() => {}" @radio-change="() => {}" >
            <template #empty>
                <el-empty :image-size="100" />
            </template>
            <vxe-column fixed="left" title="#" type="seq" width="50"/>
            <vxe-column align="left" field="name" min-width="140" title="主机程序名称"></vxe-column>
            <vxe-column field="version" width="120" title="程序版本">
                <template #default="{row}">
                    V{{row.versionNum}}
                </template>
            </vxe-column>
            <vxe-column align="left" field="debugOrRelease" title="程序版本类型" width="120">
                <template #default="{row}">
                    <el-tag v-if="row.debugOrRelease === 'Debug'" effect="dark" type="warning">测试版</el-tag>
                    <el-tag v-if="row.debugOrRelease === 'Release'" effect="dark" type="primary">正式版</el-tag>
                </template>
            </vxe-column>
            <vxe-column :resizable="false" field="action" title="操作" :width="$widthColumn(180)">
                <template #default="{row}">
                    <table-action :actions="[
                            {title: '程序日志', type: 'primary', ok: logData},
                            {title: '程序配置项', permission: permission.config, type: 'warning', ok: configData},
                        ]" :data="row" />
                </template>
            </vxe-column>
        </vxe-table>
        <div class="page-config">
            <vxe-pager v-model:current-page="requestParams.pageIndex" v-model:page-size="requestParams.pageSize" :layouts="['PrevJump', 'PrevPage', 'JumpNumber', 'NextPage', 'NextJump', 'Sizes', 'FullJump', 'Total']" :page-sizes="pageConfig.sizes" :total="pageConfig.total" background size="mini" @page-change="onPageChange" />
        </div>
        <LogList ref="logList"/>
        <SystemConfig ref="systemConfig"/>
    </div>
</template>

<script setup>
import {ref, reactive, computed, onMounted, inject} from "vue";
import {useStore} from "vuex";
import {useRouter} from "vue-router";
import * as api from "./api.js"
import LogList from "./LogList.vue"
import SystemConfig from "./SystemConfig.vue"

const {$message, $fixedColumn, $widthColumn} = window;

const props = defineProps({});
const emits = defineEmits();


const filters = {
    dateTime(val, format = "YYYY-MM-DD HH:mm:ss") {
        if (!val) return ""
        return $dayjs(val).format(format)
    }
}

// 路由
const router = useRouter();
// store
const store = useStore();
const tableHeight = computed(() => store.getters.layoutType === "mobile" ? "" : store.getters.containerHeight - 300)
const detailsInfo = inject("detailsInfo")
// 响应式数据
const state = reactive({
    // 表格数据加载中
    isLoading: false,
    // 表格数据
    list: []
})

// 当前页面功能权限
const permission = {
    config: "ComputerProgram:GetPCProgConfig",
};

// 请求query参数
const requestParams = reactive({
    orderCol: "id",
    isDesc: false,
    pageIndex: 1,
    pageSize: 20,
});
// 请求body参数
const requestBody = reactive({
    name: null,
})
// 筛选区域配置
const requestBodyConfig = reactive({
    name: {label: "名称", component: "el-input"},
    // code: {label: "编号", component: "el-input", inMore: true},
    //sort: {label: "排序", component: "el-select", data: [{name: "1", value: 1}, {name: "2", value: 2}], inMore: true},
    //createdTime: {label: "创建时间", component: "el-date-picker", format: "YYYY-MM-DD", inMore: true},
    //updateTime: {label: "更新时间", component: "el-date-picker-datetime", format: "YYYY-MM-DD HH:mm:ss", inMore: true}
})
// 分页配置
const pageConfig = reactive({
    total: 0,
    sizes: [10, 20, 50, 100, 200]
})

const logList = ref()
function logData(row) {
    logList.value.show({
        title: "主机程序日志",
        options: {...row}
    })
}

const systemConfig = ref()
function configData(row) {
    systemConfig.value.show({
        title: `程序配置项`,
        options: {
            ...row
        },
    })
}


// 点击搜索
function searchClicked() {
    console.primary("搜索条件: ", requestBody)
    reload(true);
}

// 查询列表
async function loadList() {
    const params = {
        ...requestParams
    };
    const body = {
        ...requestBody,
        computerId: detailsInfo.value.id,
    };
    state.isLoading = true;
    const {success, data} = await api.GetComputerProgramPageList(params, body);
    state.isLoading = false;
    if (!success) return 0;
    const {items, totalCount} = data;
    state.list = items;
    pageConfig.total = totalCount;
}

// 分页事件
function onPageChange({type}) {
    if (type === "current") {
        loadList()
    }
    if (type === "size") {
        reload(true)
    }
}

// 刷新
function reload(resetPageIndex) {
    if (resetPageIndex) requestParams.pageIndex = 1;
    loadList()
}


onMounted(() => {

    loadList()
})
</script>

<style scoped lang="scss">
.Index {
}
</style>